<template>
	<view class="invest">
		<view class="title">{{ $t("invest.title") }}</view>
		<view class="tab">
			<view :class="{ active: tab == 0 }" @click="tab = 0">{{ $t("invest.tab.intelligentInvestment") }}</view>
			<view :class="{ active: tab == 1 }" @click="tab = 1">{{ $t("invest.tab.investmentRecords") }}</view>
		</view>
		<view v-if="tab == 0">
			<view class="investList" v-if="WisdomProjectList.length">
				<view v-for="(item, idx) in WisdomProjectList" :key="idx"
					@click="goTo('/pages/invest/intelligentInvestment?obj=' + JSON.stringify(item))">
					<view>
						<image :src="item.icon" mode="widthFix" />
					</view>
					<view>
						<view class="name">{{ item.name }}</view>
						<view>{{ $t("invest.dailyRate") }}：<text>{{ item.rate * 100 }}%</text></view>
						<view>{{ $t("invest.investmentCycle") }}：<text>{{ item.cycle }}天</text></view>
						<view>{{ $t("invest.investmentPrice") }}：<text class="price">{{ item.price }} USDT</text></view>
					</view>
				</view>
			</view>
			<noData v-else />
		</view>

		<view v-if="tab == 1">
			<view class="investmentRecords" v-if="UsersWisdomProjectOrderList?.length">
				<view v-for="(item, idx) in UsersWisdomProjectOrderList" :key="idx">
					<view class="bor">
						<view>{{ $t("invest.investmentRecordsDetail") }}</view>
					</view>
					<view>
						<view>{{ $t("invest.orderNumber") }}</view>
						<view>{{ item.order_no }}</view>
					</view>
					<view>
						<view>{{ $t("invest.unitPrice") }}</view>
						<view>{{ item.money }}USDT</view>
					</view>
					<view>
						<view>{{ $t("invest.cycle") }}</view>
						<view>{{ item.cycle }}{{ $t("invest.day") }}</view>
					</view>
					<view>
						<view>{{ $t("invest.dailyExchangeRate") }}</view>
						<view>{{ item.rate * 100 }}%</view>
					</view>
					<view>
						<view>{{ $t("invest.repayment") }}</view>
						<view>{{ $t("invest.repaymentDetails") }}</view>
					</view>
					<view class="bor">
						<view>{{ $t("invest.time") }}</view>
						<view>{{ formattingTime(item.add_time) }}~{{ formattingTime(item.expiration_date) }}</view>
					</view>
					<view>
						<view>{{ $t("invest.investmentFunds") }}</view>
						<view class="investColor">{{ item.money }}USDT</view>
					</view>
					<view>
						<view>{{ $t("invest.expectedIncome") }}</view>
						<view class="incomeColor">{{ item.expiration_rate }}USDT</view>
					</view>
				</view>
			</view>
			<noData v-else />
		</view>

		<customerService />
	</view>
</template>

<script setup lang="ts">
	import { ref, getCurrentInstance } from "vue";
	import { onShow, onReachBottom } from "@dcloudio/uni-app";
	const instance = getCurrentInstance()?.appContext.config.globalProperties;
	import { WisdomProject, UsersWisdomProjectOrder } from "@/api/ProjectApi";

	let tab = ref<number>(0)

	let UsersWisdomProjectOrderList = ref<Array<any>>([]);
	let select_time : any = null;
	const UsersWisdomProjectOrderFn = async () => {
		let list = await UsersWisdomProjectOrder({
			select_time,
		});
		if (!select_time) {
			UsersWisdomProjectOrderList.value = list;
		} else {
			UsersWisdomProjectOrderList.value = [...UsersWisdomProjectOrderList.value, ...list];
		}
	};
	let WisdomProjectList = ref<Array<any>>([])
	const initFn = () => {
		WisdomProject().then((e) => {
			WisdomProjectList.value = e
		})
	}
	initFn()

	onShow(() => {
		instance?.$changeLanguage()
		UsersWisdomProjectOrderFn()
	})
	onReachBottom(() => {
		select_time = UsersWisdomProjectOrderList.value[UsersWisdomProjectOrderList.value.length - 1].add_time;
		UsersWisdomProjectOrderFn();
	});
</script>
<style scoped lang="scss">
	@import "../../static/scss/invest.scss";
</style>